<template>
    <div class="table-wrapper">
        <div v-if="!loading" class="trueBox">
          <button v-if="yes_or_no_select_button" @click="flag = !flag" class="edit">选中 / Sel</button>
          <button v-if="yes_or_no_delete_button" :class="flag ? 'del' : 'del noClick'" disabled="true">删除 / Del</button>
          <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              :cell-style="cellStyle"
              :class="flag ? ' tableShadow' : ''"
              >
                <!-- 复选框 -->
                <el-table-column
                type="selection"
                width="55"
                v-if="flag"
                >
                </el-table-column>

                <!-- 遍历操作 -->
                <el-table-column
                :label="item.title"
                v-for="item in tableHead.msg"
                :key="item.title"
                >
                  <template slot-scope="scope">
                    {{ scope.row[item.fieId] }}
                    <button v-if="item.opera" @click="handleEdit(scope.$index, scope.row)" class="operate">查看</button>
                  </template>
                </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="paging.total"
            :page-size="paging.pageSize"
            class="paging"
            @current-change="pageChange"
            v-if=" tableHead.yes_or_no_paging ? tableHead.yes_or_no_paging : false"
            >
          </el-pagination>

        </div>

        <!-- 加载动画 -->
        <Loading v-if="loading"/>
    </div>
</template>

<script>
// 引入loading
import Loading from 'Ui/Loading'
// 引入获取管理员对应的所有用户及权限接口  和 分页接口
import { getMasterPower, getManagerPaging } from '@/api/masterPower'
export default {
    // 封装的表格
    name: 'myTable',
    components:{
      Loading
    },
    // props
    props:['tableHead'],
    data(){
        return {
          // 表格数据 
          tableData: [],
          loading: false,
          flag: false,
          // 和分页有关的数据
          paging:{
            total: 0,
            pageSize: 13
          }
        }
    },
    computed:{
      yes_or_no_select_button(){
        return this.tableHead.yes_or_no_select_delete_btn ? this.tableHead.yes_or_no_select_delete_btn.select : false
      },
      yes_or_no_delete_button(){
        return this.tableHead.yes_or_no_select_delete_btn ? this.tableHead.yes_or_no_select_delete_btn.delete : false
      }
    },
    // created
    created(){
      // 调用获取管理员对应的所有用户及权限接口
      this.getMasterPower()
    },
    // methods
    methods: {
      // 调用获取管理员对应的所有用户及权限接口
      getMasterPower(){
        // loading状态
        this.loading = true
        getMasterPower('userId=' + 1).then(res => {
          // loading状态
          this.loading = false
          this.$store.state.loading = true
          // s设置表单数据
          this.tableData = res.data
          // 设置分页总数
          this.paging.total = res.count
          console.log(res);
        })
      },
      // 表格操作
      handleEdit(idx,value){
        console.log(value);
      },
      // 改变分页触发的事件
      pageChange(nowPage){
        const paramStr =  'page=' + nowPage +
                          '&total=13' 
        getManagerPaging(paramStr).then(res => {
          console.log(res, 111);
          this.tableData = res.data
        })
      },
      // 改变某个表格内部数据颜色
      cellStyle(row){
        // 如果有特殊需要加深颜色的, 执行
        if(this.tableHead.specialColor){
          if(this.tableHead.specialColor.colTitle && this.tableHead.specialColor.rowTitle){
            if (row.column.label === this.tableHead.specialColor.colTitle && row.row[this.tableHead.specialColor.fieId] === this.tableHead.specialColor.rowTitle){
              return "color: " + this.tableHead.specialColor.color;
            }
          }else if(this.tableHead.specialColor.colTitle && !this.tableHead.specialColor.rowTitle){
            if (row.column.label === this.tableHead.specialColor.colTitle){
              return "color: " + this.tableHead.specialColor.color;
            }
          }
        }
      }
    },
    beforeDestroy(){
        this.$store.state.loading = false
    }
}
</script>

<style lang="scss">
@import '~style/table.scss';
.el-table{
  margin-top: 50px;
}
.wjy{
  color: red;
}
</style>